<!--
 * @FileDescription: 登陆页面组件
 * @Author: yijiamu
 * @Date: 2022-05-09 21:25:04
 * @LastEditors: yijiamu
 * @LastEditTime: 2022-05-09 21:25:04
 -->

<template>
  <body>
    <header>
      <i class="cancel el-icon-close" @click="$router.go(-1)"></i>
    </header>
    <main>
      <el-form>
        <h2 class="title">密码登录</h2>
        <div class="input">
          <el-input
            v-model="username"
            placeholder="手机 / 用户名"
            clearable/>
          <el-input
            placeholder="密码"
            v-model="password"
            show-password
            clearable/>

          <div class="verification-code">
            <el-input
              placeholder="验证码"
              class="code-value"
              v-model="captcha_code"/>
            <img class="code-cover" :src="captchaCodeImg" @click="getCaptchaCode">
          </div>
          <!--            @click="onSubmit"-->
          <el-button
            type="primary"
            round
            class="login"
            :disabled="isCompleted"
            @click="onSubmit">登陆</el-button>
        </div>
        <el-checkbox v-model="radio" label="false" class="agreement">已阅读并同意
          <span style="color: #4daaeb">《用户服务协议》、《隐私协议》</span>
        </el-checkbox>
      </el-form>
    </main>
  </body>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
import {accountLogin,reqCaptchas} from "@/api/login";
import {AxiosError, AxiosResponse} from "axios";
import {Mutation} from "vuex-class";
const namespace = "profile"

@Component({
  components: {

  }
})
export default class loginCom extends Vue {
  private username='' as string;  //用户输入的手机或用户名
  private password='' as string; //输入的密码
  private radio=false as boolean; //是否选中
  private captcha_code='' as string;  //输入的验证码
  private captchaCodeImg= '' as string; //验证码照片
  private userInfo = {} as any;
  @Mutation('RECORD_USERINFO', { namespace }) RECORD_USERINFO: any
  mounted(){
  }
  beforeMount(){
    this.getCaptchaCode()
  }
  get isCompleted(){
    if(this.username !== '' && this.password !== '' && this.radio && this.captcha_code !== '' ){
      //disable为FALSE为激活态
      return false;
    }else{
      return true;
    }
  }
  private async getCaptchaCode(){
    reqCaptchas().then((res:AxiosResponse)=>{
      this.captchaCodeImg = res.data.code;
    },err=>{
      this.$message({
        message: '网络错误，请重新刷新页面！',
        type: 'warning'
      });
    })
  }
  private async onSubmit(){
    accountLogin({
      username: this.username,
      password: this.password,
      captcha_code: this.captcha_code}
    ).then((res:AxiosResponse)=>{
      if(res.data.user_id){
        // this.userInfo = res.data;
        this.RECORD_USERINFO(res.data);
        this.$router.go(-1);
      }else{
        this.$message({
          message: '密码错误，请重新输入',
          type: 'warning'
        });
      }
      console.log(res)
    },(err:AxiosError)=>{
      console.log(err)
    })
    // if(this.userInfo){
    //   console.log(this.userInfo)
    //   alert('ok')
    // }else{
    //   alert('error')
    // }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

 body {
   background-color: #ffffff;
   height: 100vh;
 }
  .cancel {
    font-size: xx-large;
    margin: 4vw;
  }
  .title {
    margin: 10vw 5vw;
  }
  .input {
    display: flex;
    flex-direction: column;
    align-items: center;
    .el-input {
      text-align: center;
      margin: 1vw 5vw;
      width: 80%;
      font-size: medium;
      padding: 1vw 0 ;
      /deep/.el-input__inner {
        border-radius: 0;
        padding-left: 0;
        padding-bottom: 1vw;
        border-left: none;
        border-right: none;
        border-top: none;
        color: #9a9a9a;
      }
    }
    .login {
      margin-top: 10vw;
      width: 80%;
      font-size: medium;
    }
    .verification-code {
      display: flex;
      flex-direction: row;
      align-items: center;
      .code-value{
        margin: 0 5vw 0 0;
        width: 55vw;

      }
      .code-cover {
        width: 20vw;
        //margin-right: 5vw;
        //height: 5vh;
      }
    }
  }
  .agreement {
    margin: 30vh 0 10vw 5vw;
  }

</style>
